<template>
    <div class="home-new">
        <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
            <template #right>
                <XtxMore path="/"/>
            </template>
            <!-- 面板内容 -->
            <Transition name="fade">
                <ul class="goods-list" v-if="goods.length">
                    <li v-for="item in goods" :key="item.id">
                        <RouterLink :to="`/product/${item.id}`">
                            <img :src="item.picture" alt="">
                            <p class="name ellipsis">{{item.name}}</p>
                            <p class="price">&yen;{{item.price}}</p>
                        </RouterLink>
                    </li>
                </ul>

                <HomeSkeleton v-else bg="#f0f9f4"/>
            </Transition>
        </HomePanel>
    </div>
</template>

<script>
    import HomePanel from "@/views/home/components/home-panel";
    import XtxMore from "@/components/library/xtx-more";
    import {findNew} from "@/api/home";
    import HomeSkeleton from "@/views/home/components/home-skeleton";

    export default {
        name: "HomeNew",
        components: {HomeSkeleton, XtxMore, HomePanel},
        data() {
            return {
                goods: []
            }
        },
        created() {
            this.findNew()
        },
        methods: {
            async findNew() {
                const {result} = await findNew()
                this.goods = result
            }
        }

    }
</script>

<style scoped lang="less">

    .goods-list {
        display: flex;
        height: 406px;
        justify-content: space-between;

        li {
            width: 306px;
            height: 406px;
            background: #f0f9f4;
            .hoverShadow();

            img {
                width: 306px;
                height: 306px;
            }

            p {
                font-size: 22px;
                padding: 12px 30px 0 30px;
                text-align: center;
            }

            .price {
                color: @priceColor;
            }
        }

    }


</style>